<template>
    <view class="page">
        <u-navbar title="忘记密码" bgColor="#c6f3e9"
            titleStyle="color:#fff; text-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.5);" leftIconColor="#fff"
            :autoBack="true" :placeholder="true">
        </u-navbar>
        <!-- 顶部图片 -->

        <view class="loginImg"></view>
        <u--form class="form" ref="userInfo" errorType="message" :rules="rules" :model="userInfo">
            <u-form-item class="item" prop="email" borderBottom=true>
                <u-input style="width: 100%;" v-model="userInfo.email" border="none" prefixIcon="account" clearable
                    placeholder="请输入邮箱地址"></u-input>
            </u-form-item>
            <u-form-item class="item" prop="code" borderBottom=true>
                <u-input style="width: 100%; " v-model="userInfo.code" maxlength="6" border="none"
                    prefixIcon="info-circle" placeholder="请输入验证码 "></u-input>
                <u-button class="codeBtn" @click="sendCode">{{ sendCodeText }}</u-button>
            </u-form-item>
            <u-form-item class="item" prop="password1" borderBottom=true>
                <u-input style="width: 100%;" v-model="userInfo.password1" border="none" prefixIcon="lock" password
                    placeholder="请输入密码"></u-input>
            </u-form-item>
            <u-form-item class="item" prop="password2" borderBottom=true>
                <u-input style="width: 100%;" v-model="userInfo.password2" border="none" prefixIcon="lock" password
                    placeholder="请确认密码"></u-input>
            </u-form-item>
        </u--form>
        <u-button class="modifyBtn" @click="updatePwd">修改密码</u-button>
    </view>
</template>

<script>
import { checkUserEmail } from '@/Api/user'
import _ from 'lodash'
export default {
    data() {
        return {
            enabl: true,
            sendCodeText: '获取验证码',
            userInfo: {
                email: '',
                code: '',
                password1: '',
                password2: '',
            },
            rules: {
                email: [
                    {
                        type: 'string',
                        required: true,
                        message: '请输入邮箱',
                        trigger: ['blur']
                    },
                    {
                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: '请输入正确的邮箱',
                        trigger: ['blur'],
                        transform(value) {
                            return String(value);
                        },
                    },
                    {
                        asyncValidator: (rule, value, callback) => {
                            checkUserEmail(value).then(res => {
                                if (res.data.status == 200) {
                                    this.enabl = false;
                                    callback(new Error('该邮箱未注册'));
                                } else {
                                    this.enabl = true
                                    callback();
                                }
                            }
                            ).catch(err => {
                                callback(new Error('请求失败'));
                            });
                        },
                        trigger: ['blur'],
                    }
                ],
                code: [{
                    type: 'string',
                    required: true,
                    message: '请输入验证码',
                    trigger: ['blur']
                },
                {
                    type: 'string',
                    required: true,
                    len: 6,
                    message: '验证码应当是6位数字',
                    trigger: ['change']
                }],
                password1: [
                    {
                        type: 'string',
                        required: true,
                        message: '请输入密码',
                        trigger: ['blur']
                    }, {
                        min: 6,
                        message: '密码应当是6位以上',
                        trigger: ['blur']
                    }
                ],
                password2: [{
                    type: 'string',
                    required: true,
                    message: '请确认密码',
                    trigger: ['blur']
                },
                {
                    validator: (rule, value, callback) => {
                        if (value === this.userInfo.password1) {
                            callback();
                        } else {
                            callback(new Error('两次密码不一致'));
                        }
                    },
                    message: '两次输入的密码不一致',
                    trigger: ['blur', 'change']
                }],
            }
        }
    },
    methods: {

        updatePwd: _.debounce(function () {
            this.$refs.userInfo.validate().then(res => {
                if (res) {
                    this.$store.dispatch('updatePwd', this.userInfo).then(res => {
                        console.log(res)
                        if (res == 'success') {
                            this.$tools.toast('修改成功')
                            this.$Router.push({
                                name: 'login'
                            })
                        }
                        else if (res == 'codeError') {
                            this.$tools.toast('验证码错误')
                        }
                        else
                            this.$tools.toast('修改失败')
                    })
                }
                console.log(res)
            })
        }, 1000),
        //使用lodash防抖
        sendCode: _.debounce(function () {

            if (!this.userInfo.email || !this.enabl) {
                this.$tools.toast('请输入正确的邮箱');
                return;
            }
            this.$store.dispatch('sendCode', this.userInfo.email).then(res => {
                if (res == 'success') {
                    let time = 60;
                    this.sendCodeText = time + 's';
                    let timer = setInterval(() => {
                        time--;
                        this.sendCodeText = time + 's';
                        if (time === 0) {
                            clearInterval(timer);
                            this.sendCodeText = '获取验证码';
                        }
                    }, 1000);
                    this.$tools.toast('发送成功，请注意查收');
                }
                else
                    this.$tools.toast('发送失败，请稍后再试');

            })

        }, 1000)
    }
}
</script>

<style lang="scss">
page {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .loginImg {
            background-color: yellow;
            flex-shrink: 0;
            background-image: url('@/static/images/login_title.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 35%;

            .title {
                font-size: 1.5rem;
            }
        }

        .form {
            width: 80%;

            .item {
                width: 100%;
                height: 4rem;

                .codeBtn {
                    letter-spacing: 0.2rem;
                    margin-top: -1rem;
                    width: 40%;
                    text-align: center;
                    background: $uni-color-theme-5;
                    color: #fff;
                    border-radius: 0.3rem;
                }
            }
        }

        .modifyBtn {
            margin-top: 3rem;
            width: 80%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 1.2rem;
            background: $uni-color-theme-5;
            color: #fff;
            border-radius: 0.3rem;
            border: none;
            box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.3);
        }
    }
}
</style>